<!--
 * @Author: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @Date: 2024-07-23 14:47:38
 * @LastEditors: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @LastEditTime: 2024-07-23 18:52:38
 * @FilePath: \za-workbench-main\src\views\test\components\commonPagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="props.pageSize"
      :size="size"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">


interface pageSizeType {
  [index:number]:number
}
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const props = defineProps({
pageSize:{
  type:Array<pageSizeType>,
  default:()=>{
    return [10,20,50,100, 200,500]
  }
},
size:{
  type:String,
  default:'small'
},
total:{
  type:Number,
  default:0
},
background:{
  type:Boolean,
  default:true
}
})
const emit =defineEmits(['size-change','current-change'])
function handleSizeChange(val: number){
 emit('size-change',val)
 currentPage4.value = 1
}
function handleCurrentChange(val: number){
  emit('current-change',val)

}
</script>

<style>

</style>
